<template>
	<view class="" style="padding-bottom: 120rpx;">
		<u-navbar title="首页" leftIconSize="0" bgColor="transparent" :autoBack="true" :fixed="false"></u-navbar>
		
		<view class="p-30">
			<!-- 轮播图 -->
			<u-swiper :list="swiperList" keyName="image"></u-swiper>
			<view @click="jumpPage('/pages/common/message')" class="msg flex-row align-center justify-between">
				<view class="flex-row align-center basis-xl">
					<view class="msg-line">
						<image src="/static/images/msg.png" class="asd" mode="widthFix"></image>
						公告
					</view>
					<view class="content">
						{{notice.title}}
					</view>
				</view>
				<image src="/static/images/arrow-right.png" style="width: 35rpx;height: 35rpx;" mode="widthFix"></image>
			</view>
			<view class="flex-row align-center justify-between mb-30" style="margin-top: 60rpx;">
				<view @click="jumpPage('/pages/monitor/index')" class="left">
					监控
					<image src="/static/images/left1.png" class="left1" mode="widthFix"></image>
				</view>
				<view v-if="isTeacher == 1" @click="jumpPage('/pages/teacher/banji')" class="right">
					班级信息
					<image src="/static/images/right1.png" class="right1" mode="widthFix"></image>
				</view>
				<view v-else @click="jumpPage('/pages/mine/student')" class="right">
					{{isTeacher == 1 ? '学生' : '孩子'}}信息
					<image src="/static/images/right1.png" class="right1" mode="widthFix"></image>
				</view>
			</view>
			<view class="info-card" v-if="isLogin">
				<view class="infos" @click="swicth">
					<image src="/static/images/infos.png" style="width: 25rpx;height: 25rpx;margin-right: 10rpx;"
						mode="widthFix"></image>
					切换{{isTeacher == 1 ? '班级' : '学生'}}
				</view>
				<view class="">
					<view class="titles">
						<image src="/static/images/titles.png" style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"
							mode="widthFix"></image>
						信息详情
					</view>
					<view class="flex-column infos-content">
						<template v-if="isTeacher == 1">
							<view class="flex-row">
								<view class="flex-row label">
									<view class="">
										<image src="/static/images/userx.png"
											style="width: 25rpx;height: 25rpx;margin-right: 10rpx;" mode="widthFix">
										</image>
									</view>
									<view class="">
										班级名称：
									</view>
								</view>
								<view class="">
									<!-- {{$banjiInfo.name}} -->
								</view>
							</view>
							<u-line color="#E6E6E6" margin="20rpx 0"></u-line>
							<view class="flex-row">
								<view class="flex-row label">
									<view class="">
										<image src="/static/images/userx.png"
											style="width: 25rpx;height: 25rpx;margin-right: 10rpx;" mode="widthFix">
										</image>
									</view>
									<view class="">
										班&nbsp;&nbsp;主&nbsp;&nbsp;任：
									</view>
								</view>
								<view class="">
									{{$banjiInfo.teacher ? $banjiInfo.teacher.name : '未知'}}
								</view>
							</view>
						</template>
						<template v-else>
							<view class="flex-row">
								<view class="flex-row label">
									<view class="">
										<image src="/static/images/userx.png"
											style="width: 25rpx;height: 25rpx;margin-right: 10rpx;" mode="widthFix">
										</image>
									</view>
									<view class="">
										孩子名称：
									</view>
								</view>
								<view class="">
									{{$studentInfo && $studentInfo.name}}
								</view>
							</view>
							<u-line color="#E6E6E6" margin="20rpx 0"></u-line>
							<view class="flex-row">
								<view class="flex-row label">
									<view class="">
										<image src="/static/images/userx.png"
											style="width: 25rpx;height: 25rpx;margin-right: 10rpx;" mode="widthFix">
										</image>
									</view>
									<view class="">
										班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级：
									</view>
								</view>
								<view class="">
									{{$studentInfo && ($studentInfo.banji ? $studentInfo.banji.name : '未知')}}
								</view>
							</view>
							<u-line color="#E6E6E6" margin="20rpx 0"></u-line>
							<view class="flex-row">
								<view class="flex-row label">
									<view class="">
										<image src="/static/images/userx.png"
											style="width: 25rpx;height: 25rpx;margin-right: 10rpx;" mode="widthFix">
										</image>
									</view>
									<view class="">
										班&nbsp;&nbsp;主&nbsp;&nbsp;任：
									</view>
								</view>
								<view class="">
									{{$banjiInfo.banji ? $banjiInfo.banji.teacher.name : '未知'}}
								</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<page-tabbar :value="0" />
		<select-info ref="select" />
	</view>
</template>

<script>
	import {
		swiperList,
		noticeList
	} from '@/common/api.js'
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				notice:{},
				show: false,
				swiperList: []
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {
			initData() {
				noticeList().then(res => {
					console.log('res',res);
					this.notice = res[0];
				})
				swiperList().then(res => {
					console.log('res', res);
					this.swiperList = res
				})
			},
			swicth() {
				this.$refs.select.show = true
			}
		}
	}
</script>

<style>
	.msg {
		background: rgba(255, 255, 255, 0.5);
		box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(142, 142, 142, 0.2);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-top: 30rpx;
		padding: 30rpx;
	}

	.msg-line {
		border-right: 1rpx solid #D9D9D9;
		padding-right: 20rpx;
		margin-right: 20rpx;
		position: relative;
		z-index: 1;
	}

	.asd {
		position: absolute;
		top: -10px;
		left: -10rpx;
		width: 35rpx;
		height: 35rpx;
		z-index: 3;
	}

	.content {
		color: #666666;
	}

	.left {
		background: url('') no-repeat;
		background-size: 100% 100%;
		height: 200rpx;
		width: 48%;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		color: #fff;
		font-size: 38rpx;
		position: relative;
	}

	.right {
		background: url("") no-repeat;
		background-size: 100% 100%;
		height: 200rpx;
		width: 48%;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		color: #fff;
		font-size: 38rpx;
		position: relative;
	}

	.left1 {
		position: absolute;
		top: -30rpx;
		right: 10rpx;
		width: 100rpx;
		height: 120rpx;
	}

	.right1 {
		position: absolute;
		top: -30rpx;
		right: 10rpx;
		width: 100rpx;
		height: 120rpx;
	}

	.info-card {
		background: url('') no-repeat;
		background-size: 100% 100%;
		height: 450rpx;
		width: 100%;
		margin-top: 30rpx;
		position: relative;
	}

	.infos {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		color: #FB7EA0;
	}

	.titles {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 120rpx;
		line-height: 120rpx;
		padding-left: 40rpx;
		font-size: 36rpx;
		font-weight: 700;
	}

	.infos-content {
		padding: 0 40rpx;
		height: 280rpx;
	}

	.label {
		width: 200rpx;
	}
</style>